<template>
  <div>当前鼠标位置</div>
  <div>x: {{ x }}</div>
  <div>y: {{ y }}</div>
  <div>{{str}}</div>
  <button @click="changeStr">点我就变</button>
</template>

<script>
export default {
  // vue2 中采用的是 options API
  // 常见的配置项: data created methods watch computed components
  data () {
    return {
      x: 0,
      y: 0,
      str: 'hello world'
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.move)
  },
  methods: {
    move(e) {
      this.x = e.pageX
      this.y = e.pageY
    },
    changeStr() {
      this.str = '今天学vue3了'
    }
  },
  destroyed() {
    document.removeEventListener('mousemove', this.move)
  }
}
</script>
